<template>
  <div class="city">
    <city-header :hotCityList="hotCityList" :cityList="cityList"></city-header>

    <!-- <city-hot :hotCityList="hotCityList"></city-hot>
    <city-sort :cityList="cityList"></city-sort>
    <city-list :cityList="cityList"></city-list> -->
  </div>
</template>
<script>
import cityHeader from "../components/City/Header.vue";
// import cityHot from "../components/City/Hot.vue";
// import citySort from "../components/City/Sort.vue";
// import cityList from "../components/City/List.vue";
export default {
  components: {
    cityHeader,
    // cityHot,
    // citySort,
    // cityList,
  },
  data() {
    return {
      hotCityList: [],
      cityList: [],
    };
  },
  mounted() {
    this.$http.get("http://localhost:8080/static/City.json").then((res) => {
      let data = res.data;
      console.log(data);
      this.hotCityList = data.hotCityList;
      this.cityList = data.cityList;
    });
  },
};
</script>
<style>
.city {
  background: #f5f5f5;
}
</style>
